<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { addArticle } from "@/api/article.js";
const router = useRouter();
let imageUrl = ref();
let text = ref("?????");
let form = reactive({
  title: "",
  summary: "",
  tagsId: null,
  typeId: null,
  composeType: null,
  contentMd: "",
});
const tagEnumList = ref([]);
const cateEnumList = ref([]);
const formRules = reactive({
  title: [{ required: true, message: "必填选项", trigger: "blur" }],
  summary: [{ required: true, message: "必填选项", trigger: "blur" }],
  contentMd: [{ required: true, message: "必填选项", trigger: "blur" }],
  tagsId: [{ required: true, message: "必填选项", trigger: "blur" }],
  typeId: [{ required: true, message: "必填选项", trigger: "blur" }],
  composeType: [{ required: true, message: "必填选项", trigger: "blur" }],
});

const store = useStore();
onMounted(() => {
  getEnumType();
});
const getEnumType = async () => {
  tagEnumList.value = await store.dispatch("getEnumType", "tag-type");
  cateEnumList.value = await store.dispatch("getEnumType", "cate-type");
};
const onSubmit = async () => {
  const requestObj = form;
  requestObj.status = 2;
  requestObj.userId = store.state.user.userInfo.id;
  requestObj.isTop = 0;
  requestObj.titleImg = imageUrl.value;
  console.log("submit", requestObj);
  if (!requestObj.userId) {
    ElMessage({
      type: "info",
      message: "请先登录",
      showClose: false,
    });

    router.push("/login");
    return;
  }
  const res = await addArticle(requestObj);
  clearData();
  console.log("添加", res);
  if (res.code === 200) {
    ElMessage({
      type: "success",
      message: "提交成功，请耐心等待审核",
    });
    router.push("/user");
  }
};

const onSubmitShenhe = async () => {
  const requestObj = form;
  //  status -1 下架 0 待审批 1 发布 2 草稿
  requestObj.status = 0;
  requestObj.userId = store.state.user.userInfo.id;
  requestObj.isTop = 0;
  requestObj.titleImg = imageUrl.value;
  console.log("submit", requestObj);
  if (!requestObj.userId) {
    ElMessage({
      type: "info",
      message: "请先登录",
      showClose: false,
    });
    router.push("/login");
    return;
  }
  const res = await addArticle(requestObj);
  console.log("添加", res);
  clearData();
  if (res.code === 200) {
    ElMessage({
      type: "success",
      message: "提交成功，请耐心等待审核",
    });
    router.push("/user");
  }
};

const clearData = () => {
  form = Object.assign(form, {
    title: "",
    summary: "",
    tagsId: null,
    typeId: null,
    composeType: null,
    contentMd: "",
  });
  imageUrl.value = "";
};

const handleContent = (e) => {
  console.log(e, "content", text);
};

const handleUpload = (file) => {
  console.log(file, "file");
  const reader = new FileReader();
  reader.readAsDataURL(file.file);
  reader.onload = (e) => {
    console.log(e.target.result, "结果");
    imageUrl.value = e.target?.result;
  };
};

const beforeUpload = (file) => {
  console.log(file, "filebefore");
};
</script>

<template>
  <div class="main">
    <div class="left">
      <div class="title">发布文章</div>
      <el-card>
        <el-form :model="form" class="demo-form-inline" :rules="formRules">
          <div class="box">
            <div class="left">
              <el-form-item label="文章标题" prop="title">
                <el-input
                  v-model="form.title"
                  placeholder="请输入文章标题"
                  clearable
                />
              </el-form-item>
              <el-form-item label="文章简介" prop="summary">
                <el-input
                  v-model="form.summary"
                  placeholder="请输入文章简介"
                  clearable
                />
              </el-form-item>
            </div>
            <div class="right">
              <div class="label">封面图:</div>
              <el-upload
                class="avatar-uploader"
                :http-request="handleUpload"
                :show-file-list="false"
                :before-upload="beforeUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </div>
          </div>
          <el-form-item label="文章内容" prop="contentMd">
            <v-md-editor
              v-model="form.contentMd"
              height="400px"
              @change="handleContent"
            ></v-md-editor>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="right">
      <el-card>
        <el-form :model="form" class="demo-form-inline" :rules="formRules">
          <el-form-item label="文章标签" prop="tagsId">
            <el-select
              v-model="form.tagsId"
              class="m-2"
              placeholder="请选择文章标签"
              size="large"
            >
              <el-option
                v-for="item in tagEnumList"
                :key="item.id"
                :label="item.enumText"
                :value="item.enumCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="文章分类" prop="typeId">
            <el-select
              v-model="form.typeId"
              class="m-2"
              placeholder="请选择文章分类"
              size="large"
            >
              <el-option
                v-for="item in cateEnumList"
                :key="item.id"
                :label="item.enumText"
                :value="item.enumCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="创作类型" prop="composeType">
            <el-radio-group v-model="form.composeType">
              <el-radio :label="1">原创</el-radio>
              <el-radio :label="2">转载</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="submit">
        <h3>Are you ready</h3>
        <el-button-group>
          <el-button type="success" size="large" @click="onSubmit"
            >保存草稿</el-button
          >
          <el-button type="primary" size="large" @click="onSubmitShenhe"
            >提交审核</el-button
          >
        </el-button-group>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.main {
  width: 80%;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  .left {
    width: 100%;
    margin-right: 10px;
    .title {
      margin-bottom: 10px;
    }
    .box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        flex: 2;
      }
      .right {
        flex: 1;
        display: flex;
        align-items: flex-start;
        .label {
          margin: 0 10px;
          width: 80px;
          color: #606266;
          height: 32px;
          line-height: 32px;
        }
        :deep .el-upload {
          width: 100%;
          height: 100%;
        }
        img{
          object-fit: contain;
          width: 100%;
          height: 100%;
        }
        .avatar-uploader {
          margin-bottom: 20px;
          line-height: 100px;
          flex-basis: 200px;
          flex-shrink: 1;
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          height: 100px;
          text-align: center;
        }
        .avatar-uploader-icon {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .right {
    width: 35%;
    margin-top: 30px;
    .submit {
      margin-top: 20px;
      h3 {
        position: relative;
        text-align: center;
        font-size: 14px;
        font-weight: normal;
        color: #b5b5b5;
        margin-bottom: 10px;
        &::after {
          position: absolute;
          top: 10px;
          right: 10px;
          content: "";
          width: 50px;
          height: 1px;
          background-color: #b5b5b5;
        }
        &::before {
          position: absolute;
          top: 10px;
          left: 10px;
          content: "";
          width: 50px;
          height: 1px;
          background-color: #b5b5b5;
        }
      }
      :deep .el-card__body {
        padding: 10px 10px;
      }
      .el-button {
        width: 50%;
        &.el-button--success {
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
          background: linear-gradient(135deg, #60e464 10%, #5cb85b);
        }
        &.el-button--primary {
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
          background: linear-gradient(135deg, #59c3fb 10%, #268df7);
        }
      }
      .el-button-group {
        display: flex;
      }
    }
  }
}
</style>
